<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <div id='map-overlay' class='map-overlay'></div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "AddHoverFilter.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      MapboxCommonService.setCZBP(map, [-98, 38.88], 3)

      let overlay = document.getElementById('map-overlay');
      // Create a popup, but don't add it to the map yet.
      let popup = new mapboxgl.Popup({
        closeButton: false
      });
      // Add the source to query. In this example we're using
      // county polygons uploaded as vector tiles
      map.addSource('counties', {
        "type": "vector",
        "url": "mapbox://mapbox.82pkq93d"
      });

      map.addLayer({
        "id": "counties",
        "type": "fill",
        "source": "counties",
        "source-layer": "original",
        "paint": {
          "fill-outline-color": "rgba(0,0,0,0.1)",
          "fill-color": "rgba(0,0,0,0.1)"
        }
      }, 'settlement-label'); // Place polygon under these labels.

      map.addLayer({
        "id": "counties-highlighted",
        "type": "fill",
        "source": "counties",
        "source-layer": "original",
        "paint": {
          "fill-outline-color": "#484896",
          "fill-color": "#6e599f",
          "fill-opacity": 0.75
        },
        "filter": ["in", "COUNTY", ""]
      }, 'settlement-label'); // Place polygon under these labels.

      map.on('mousemove', 'counties', function (e) {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';

        // Single out the first found feature.
        let feature = e.features[0];

        // Query the counties layer visible in the map. Use the filter
        // param to only collect results that share the same county name.
        let relatedFeatures = map.querySourceFeatures('counties', {
          sourceLayer: 'original',
          filter: ['in', 'COUNTY', feature.properties.COUNTY]
        });

        // Render found features in an overlay.
        overlay.innerHTML = '';

        // Total the population of all features
        let populationSum = relatedFeatures.reduce(function (memo, feature) {
          return memo + feature.properties.population;
        }, 0);

        let title = document.createElement('strong');
        title.textContent = feature.properties.COUNTY + ' (' + relatedFeatures.length + ' found)';

        let population = document.createElement('div');
        population.textContent = 'Total population: ' + populationSum.toLocaleString();

        overlay.appendChild(title);
        overlay.appendChild(population);
        overlay.style.display = 'block';

        // Add features that share the same county name to the highlighted layer.
        map.setFilter('counties-highlighted', ['in', 'COUNTY', feature.properties.COUNTY]);

        // Display a popup with the name of the county
        popup.setLngLat(e.lngLat)
            .setText(feature.properties.COUNTY)
            .addTo(map);
      });

      map.on('mouseleave', 'counties', function () {
        map.getCanvas().style.cursor = '';
        popup.remove();
        map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
        overlay.style.display = 'none';
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
.map-overlay {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
  border-radius: 3px;
  position: absolute;
  width: 20%;
  top: 10px;
  left: 10px;
  padding: 10px;
  display: none;
}
</style>